<template>
  <div class="container">
    <!-- 头部 -->
    <div class="header">
      <!-- 请选择房间 -->
      <div>
        <!-- 选择器 -->
        <el-select
          v-model="data.roomList.defaultActive"
          placeholder="请选择房间"
          style="width: 240px"
          @change="roomListSelect"
          :loading="data.loading.loadingRoomList"
        >
          <el-option
            v-for="item in data.roomList.data"
            :key="item.value"
            :label="item.room_name"
            :value="item.room_id"
          />
        </el-select>
      </div>
      <!-- 请选择直播场次 -->
      <div>
        <!-- 选择器 -->
        <el-select
          v-model="data.recordList.defaultActive"
          placeholder="请选择直播场次"
          style="width: 240px"
          @change="recordListSelect"
          :loading="data.loading.loadingRecordList"
        >
          <el-option
            v-for="item in data.recordList.data"
            :key="item.value"
            :label="item.record_name"
            :value="item.record_id"
          />
        </el-select>
      </div>
    </div>
    <!-- 页面内容 -->
    <div class="content">
        <el-row v-loading="data.loading.loadingLiveOverview" class="model_content live_overview_content">
            <el-col :span="24" class="item">
              <el-row class="item_line">
                <div div class="time">
                  {{data.data.time}}
                </div>
              </el-row>
            </el-col>
            <el-col :span="24" class="item">
              <el-row class="item_line">
                <div class="title">
                  {{data.data.title}}
                </div>
              </el-row>
            </el-col>
            <el-col :span="24" class="item">
              <el-row class="item_line">
                <el-col :span="24">
                  <el-row class="item_line">
                    <div class="text" :style="fontSize()">本次</div>
                    <div class="text" :style="fontSize()">直播</div>
                    <div class="text" :style="fontSize()">持续</div>
                    <div class="text" :style="fontSize()">了</div>
                    <div class="value time_count">
                      {{ data.data.time_count.hour }}
                    </div>
                    <div class="text" :style="fontSize()">小时</div>
                    <div class="value time_count">
                      {{ data.data.time_count.minute }}
                    </div>
                    <div class="text" :style="fontSize()">分钟</div>
                    <div class="value time_count">
                      {{data.data.time_count.second}}
                    </div>
                    <div class="text" :style="fontSize()">秒</div>
                  </el-row>
                </el-col>
                <el-col :span="24">
                  <el-row class="item_line">
                    <div class="text" :style="fontSize()">共有</div>
                    <div class="value active_people">
                      {{data.data.active_people}}
                    </div>
                    <div class="text" :style="fontSize()">个</div>
                    <div class="text" :style="fontSize()">人</div>
                    <div class="text" :style="fontSize()">参与</div>
                    <div class="text" :style="fontSize()">了</div>
                    <div class="text" :style="fontSize()">直播</div>
                    <div class="text" :style="fontSize()">互动</div>
                  </el-row>
                </el-col>
                <el-col :span="24">
                  <el-row class="item_line">
                    <div class="text" :style="fontSize()">其中</div>
                    <div class="text" :style="fontSize()">有</div>
                    <div class="value active_people_old">
                      {{data.data.active_people_old}}
                    </div>
                    <div class="text" :style="fontSize()">人</div>
                    <div class="text" :style="fontSize()">参与</div>
                    <div class="text" :style="fontSize()">过</div>
                    <div class="text" :style="fontSize()">上一场</div>
                    <div class="text" :style="fontSize()">直播</div>
                    <div class="text" :style="fontSize()">互动</div>
                  </el-row>
                </el-col>
                <el-col :span="24">
                  <el-row class="item_line">
                    <div class="text" :style="fontSize()">共发送</div>
                    <div class="text" :style="fontSize()">了</div>
                    <div class="value barrage_count">
                      {{data.data.barrage_count}}
                    </div>
                    <div class="text" :style="fontSize()">条</div>
                    <div class="text" :style="fontSize()">弹幕</div>
                    <div class="text" :style="fontSize()">和</div>
                    <div class="value gift_count">
                      {{data.data.gift_count}}
                    </div>
                    <div class="text" :style="fontSize()">个</div>
                    <div class="text" :style="fontSize()">礼物</div>
                  </el-row>
                </el-col>
                <el-col :span="24">
                  <el-row class="item_line">
                    <div class="text" :style="fontSize()">礼物</div>
                    <div class="text" :style="fontSize()">总值</div>
                    <div class="value count_gift">
                      {{data.data.gift_value}}
                    </div>
                    <div class="text" :style="fontSize()">金瓜子</div>
                  </el-row>
                </el-col>
                <el-col :span="24">
                  <el-row class="item_line">
                    <div class="text" :style="fontSize()">本场</div>
                    <div class="text" :style="fontSize()">直播</div>
                    <div class="text" :style="fontSize()">中</div>
                    <div class="text" :style="fontSize()">，</div>
                    <div class="text" :style="fontSize()">弹幕</div>
                    <div class="text" :style="fontSize()">发送</div>
                    <div class="text" :style="fontSize()">频率</div>
                    <div class="text" :style="fontSize()">最高</div>
                    <div class="text" :style="fontSize()">的</div>
                    <div class="text" :style="fontSize()">时间段</div>
                    <div class="text" :style="fontSize()">是</div>
                    <div class="value barrage_frequency_top_time">
                      {{data.data.barrage_frequency_top_time}}
                    </div>
                  </el-row>
                </el-col>
                <el-col :span="24">
                  <el-row class="item_line">
                    <div class="text" :style="fontSize()">共计</div>
                    <div class="value count_gift">
                      {{data.data.barrage_frequency_top_count}}
                    </div>
                    <div class="text" :style="fontSize()">条</div>
                  </el-row>
                </el-col>
                <el-col :span="24">
                  <el-row class="item_line">
                    <div class="text" :style="fontSize()">礼物</div>
                    <div class="text" :style="fontSize()">发送</div>
                    <div class="text" :style="fontSize()">频率</div>
                    <div class="text" :style="fontSize()">最高</div>
                    <div class="text" :style="fontSize()">的</div>
                    <div class="text" :style="fontSize()">时间段</div>
                    <div class="text" :style="fontSize()">是</div>
                    <div class="value gift_frequency_top_time">
                      {{data.data.gift_frequency_top_time}}
                    </div>
                  </el-row>
                </el-col>
                <el-col :span="24">
                  <el-row class="item_line">
                    <div class="text" :style="fontSize()">共计</div>
                    <div class="value count_gift">
                      {{data.data.gift_frequency_top_count}}
                    </div>
                    <div class="text" :style="fontSize()">条</div>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
        </el-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from 'vue'
import http from '@/http/http'
const data = reactive({
  giftTopNumCharts: true,
  giftTopGiftPriceCharts: true,
  giftTopPriceCharts: true,
  roomList: {
    defaultActive: '-',
    data: [
      {
        room_name: '-',
        room_id: '-'
      }
    ]
  },
  recordList: {
    defaultActive: '-',
    data: [
      {
        record_name: '-',
        record_id: '-'
      }
    ]
  },
  data: {
    time: '',
    title: '',
    time_count: {
      hour: '',
      minute: '',
      second: ''
    },
    active_people: '',
    active_people_old: '',
    barrage_count: '',
    gift_count: '',
    gift_value: '',
    barrage_frequency_top_time: '',
    barrage_frequency_top_count: '',
    gift_frequency_top_time: '',
    gift_frequency_top_count: ''
  },
  loading: {
    loadingRoomList: true,
    loadingLiveOverview: true
  }
})

onMounted(() => {
  setRoomList()
})
/**
 * 获取并渲染 房间 数据
 */
const setRoomList = () => {
  data.loading.loadingRoomList = true
  http
    .request({
      url: '/Index/getRoomList',
      method: 'POST'
    })
    .then((res) => {
      if (res.status === 200) {
        data.roomList.defaultActive = res.data[0].room_id
        data.roomList.data = res.data
        data.loading.loadingRoomList = false
        setRecordList()
      }
    })
}
/**
 * 获取并渲染 直播记录 数据
 */
const setRecordList = () => {
  data.loading.loadingRecordList = true
  http
    .request({
      url: '/Index/getRecordList',
      data: {
        room_id: data.roomList.defaultActive
      },
      method: 'POST'
    })
    .then((res) => {
      if (res.status === 200) {
        data.recordList.defaultActive = res.data[0].record_id
        setDetailParsing()
        data.recordList.data = res.data
        data.loading.loadingRecordList = false
      }
    })
}

/**
 * 获取并渲染 直播记录 数据
 */
const setDetailParsing = () => {
  data.loading.loadingLiveOverview = true
  http
    .request({
      url: '/Index/getDetailParsing',
      data: {
        record_id: data.recordList.defaultActive
      },
      method: 'POST'
    })
    .then((res) => {
      if (res.status === 200) {
        data.data = res.data
        data.loading.loadingLiveOverview = false
      }
    })
}
/**
 * 切换房间
 */
const roomListSelect = (e) => {
  setRecordList()
}
/**
 * 切换记录
 */
const recordListSelect = (e) => {
  setDetailParsing()
}

// 随机字号
const fontSize = () => {
  return 'font-size:' + getRandomArbitrary(20, 45) + 'px'
}
const getRandomArbitrary = (min, max) => {
  return Math.random() * (max - min) + min
}
</script>

<style lang="scss" scoped>
$shadow: 0 2px 10px 0 rgb(0, 0, 0, 0.1); // 阴影
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.live_overview_content {
}
.item_line {
  align-items: baseline;
  padding-left: 50px;
}
.time {
  font-size: 25px;
  color: #63bbd0;
  font-weight: bold;
  margin-bottom: 30px;
}
.title {
  font-size: 30px;
  font-weight: bold;
  color: #12aa9c;
  margin-bottom: 30px;
}
.text {
  color: #737c7b;
}
.value {
  margin: 0 3px;
  padding-top: 5px;
  font-size: 45px;
  color: #41b349;
}
</style>
